<template>
	<!-- 钻石商城  diamondMall-->
	<view class="">
		<view class="diamondMall_head flex1 flex-between p20">
			<view class="">
				<u-icon @click=backhomeindex() class="size-40" name="arrow-left"></u-icon>
			</view>
			<view class="size-30 fw ml-60 mycustomer_head">
				{{name}}
			</view>
			<view class="">
				<u-icon @click="friendDetail(user_id,list_id)" v-if="this.name!=='群聊'" class="size-40"
					name="more-dot-fill"></u-icon>
			</view>
		</view>
		<view class="" style="background-color: rgb(240, 239, 244);">
			<scroll-view scroll-with-animation="true" style="height: 1100rpx;" scroll-y="true" :scroll-top="scrollTop">
				<view class="numbersbox flex flex-start ptb-10 plr-10" v-if="this.name=='群聊'">
					<image :src="'http://im.ezongguan.com/static/photo/'+item.photo" mode="" v-for="item in numberList">
					</image>
				</view>
				<view class=" mt-40 p10  " v-for="(item,index) in chatMessages" style="">
					<view :style="{float:item.msg.user_info.uid ==obj?'left':'right'}" class="flex1"
						style="align-items: center;">
						<image v-if="item.msg.user_info.uid==obj" class=""
							:src="'http://im.ezongguan.com/static/photo/' +item.msg.user_info.face" mode=""
							style="width: 60rpx;height: 60rpx;border-radius: 50%;">
						</image>
						<view class="size-26"
							style="background-color: #ECECEC;padding: 10px;border-radius: 10px 0px 10px 10px;margin: 0 10px 0px 10px;word-wrap: break-word;word-break: normal;max-width: 230px;">
							{{item.msg.content.text}}
						</view>
						<image v-if="item.msg.user_info.uid!=obj" class=""
							:src="'http://im.ezongguan.com/static/photo/' +item.msg.user_info.face" mode=""
							style="width: 60rpx;height: 60rpx;border-radius: 50%;">
						</image>

					</view>
				</view>

			</scroll-view>
		</view>
		<view class="mycustomer_bottom flex1"
			style="align-items: center;justify-content: space-evenly;background-color: #E9E9E9;">
			<view class="">
				<image src="../../static/my/my_luyin.png" mode="widthFix" style="width: 50rpx;"></image>
			</view>
			<view class="">
				<input maxlength=99999 @input="handleInput" v-model="value1" @confirm=enter placeholder=''
					style="background-color: #FFF;width: 250px;height: 60rpx;;border-radius: 5px;margin: 0 0 0 0;" />
			</view>
			<view class="">
				<image src="../../static/my/my_weixiao.png" mode="widthFix" style="width: 50rpx;"></image>
			</view>
			<view class="">
				<image src="../../static/my/my_jiahao.png" mode="widthFix" style="width: 50rpx;"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				setIntervalist: '',
				obj: '',
				pageList1: [],
				pageList2: [],
				valueInput: '',
				value1: '',
				scrollTop: 0,
				list_id: '',
				name: '',
				numberList: '',
				chatMessages: [],
				user_id: ''
			}

		},
		onShow() {

			var params = {
				user_id: this.user_id,
				_token: uni.getStorageSync('im_token'),
				_agent_id: '1'
			}
			uni.request({
				url: `http://im.ezongguan.com/im/message/getListId`,
				method: 'POST',
				data: params,
				success: (res) => {
					this.list_id = res.data.data.list_id
					console.log(this.list_id);
					// this.numberList = res.data.data
					// console.log(this.numberList)
					this.getChatDetails()
					this.getMemberPhotos()
					// this.chatData()
					// this.setchat()
				},

			})


		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			// console.log("滚动距离为：" + e.scrollTop);
		},
		onLoad(options) {
			console.log(options);
			this.user_id = options.user_id
			this.show_name = options.show_name
			// this.list_id = options.list_id
		},
		onHide() {
			clearInterval(this.setIntervalist)
			this.setIntervalist = null
			console.log('onHide');
		},
		onUnload() {
			clearInterval(this.setIntervalist)
			this.setIntervalist = null
			console.log('onUnload');
		},
		methods: {
			setchat() {
				this.setIntervalist = setInterval(() => {
					this.chatData()
				}, 30000)
			},
			friendDetail(user_id, list_id) {
				uni.navigateTo({
					url: '../chip/friendDetail?user_id=' + user_id + '&list_id=' + list_id
				})
			},
			// 获得当前会话内容
			chatData() {
				// this.getChatDetails()
				var params = {
					list_id: this.list_id,
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1',
					time: 0,
					is_up: 1
				}
				uni.request({
					url: `http://im.ezongguan.com/im/get/chatData`,
					method: 'POST',
					data: params,
					success: (res) => {
						// this.numberList=res.data.data
						this.chatMessages = res.data.data.list
						this.obj = res.data.data.obj_id
						console.log(this.obj);
						console.log(this.chatMessages)
						this.pageList1 = []
						this.pageList2 = []
						for (let i = 0; i < this.chatMessages.length; i++) {
							// console.log(this.chatMessages[i].msg.user_info.uid, "user_info.uid")
							// console.log(this.user_id, "user_id")
							if (this.chatMessages[i].msg.user_info.uid == this.user_id) {
								this.pageList1.push(this.chatMessages[i])
							} else {
								this.pageList2.push(this.chatMessages[i])
							}

							// console.log(this.pageList1)
							// console.log(this.pageList2)
						}
					},
				})
			},
			// 会话窗口获取成员头像
			getMemberPhotos() {
				var params = {
					list_id: this.list_id,
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/vendor/getMemberPhotos`,
					method: 'POST',
					data: params,
					success: (res) => {
						this.numberList = res.data.data
						// console.log(this.numberList)
					},
				})
			},
			// 获得会话详情
			getChatDetails() {
				console.log(this.list_id);
				var params = {
					list_id: this.list_id,
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/message/getChatDetails`,
					method: 'POST',
					data: params,
					success: (res) => {
						// console.log(res)
						if (res.data.data.group.name == '群聊') {
							this.name = res.data.data.group.name
						} else {
							this.name = res.data.data.member[1].show_name
							this.user_id = res.data.data.member[1].user_id
						}

					},
				})
			},
			// 聊天页面回退到消息中心
			backhomeindex() {
				uni.switchTab({
					url: "/pages/chip/index"
				})
			},
			// 聊天界面回车事件
			handleInput(e) {
				// this.valueInput = e.detail.value
				// console.log(this.valueInput)
			},
			enter(e) {
				// console.log(e.detail.value);
				this.valueInput = e.detail.value
				console.log(this.valueInput);
				this.value1 = null
				var params = {
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1',
					content_type: 0,
					content: `{"text":"${this.valueInput}"}`,
					list_id: this.list_id,
				}
				uni.request({
					url: `http://im.ezongguan.com/im/message/textMsg`,
					method: 'POST',
					data: params,
					success: (res) => {
						// console.log(res)  
						this.chatData()
					},
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #FFF;

	}

	.numbersbox {
		background-color: #fff;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background: #fff;
	}

	.mycustomer_head {
		width: 390rpx;
		text-align: center;
	}

	.mycustomer_bottom {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>
